import React, { useEffect, useRef, useState } from 'react';
import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';

interface CarouselProps {
    images: { source: any; title: string }[];
    autoPlay?: boolean;
    interval?: number;
}

const ECGImageCarousel: React.FC<CarouselProps> = ({ 
    images, 
    autoPlay = true, 
    interval = 3000 
}) => {
    const [currentIndex, setCurrentIndex] = useState(0);
    const intervalRef = useRef<NodeJS.Timeout | null>(null);

    useEffect(() => {
        if (autoPlay && images.length > 1) {
            intervalRef.current = setInterval(() => {
                setCurrentIndex((prevIndex) => 
                    prevIndex === images.length - 1 ? 0 : prevIndex + 1
                );
            }, interval);
        }

        return () => {
            if (intervalRef.current) {
                clearInterval(intervalRef.current);
            }
        };
    }, [autoPlay, interval, images.length]);

    const goToPrevious = () => {
        setCurrentIndex(currentIndex === 0 ? images.length - 1 : currentIndex - 1);
    };

    const goToNext = () => {
        setCurrentIndex(currentIndex === images.length - 1 ? 0 : currentIndex + 1);
    };

    const goToSlide = (index: number) => {
        setCurrentIndex(index);
    };

    if (images.length === 0) {
        return (
            <View style={styles.container}>
                <Text style={styles.noImagesText}>暂无图片</Text>
            </View>
        );
    }

    return (
        <View style={styles.container}>
            <View style={styles.imageContainer}>
                <Image
                    source={images[currentIndex].source}
                    style={styles.image}
                    resizeMode="contain"
                />
                <Text style={styles.imageTitle}>{images[currentIndex].title}</Text>
            </View>

            {images.length > 1 && (
                <>
                    <TouchableOpacity
                        style={[styles.arrow, styles.arrowLeft]}
                        onPress={goToPrevious}
                    >
                        <Text style={styles.arrowText}>‹</Text>
                    </TouchableOpacity>

                    <TouchableOpacity
                        style={[styles.arrow, styles.arrowRight]}
                        onPress={goToNext}
                    >
                        <Text style={styles.arrowText}>›</Text>
                    </TouchableOpacity>

                    <View style={styles.indicatorContainer}>
                        {images.map((_, index) => (
                            <TouchableOpacity
                                key={index}
                                style={[
                                    styles.indicator,
                                    index === currentIndex && styles.activeIndicator
                                ]}
                                onPress={() => goToSlide(index)}
                            />
                        ))}
                    </View>
                </>
            )}
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        width: '100%',
        position: 'relative',
        backgroundColor: '#f8f9fa',
        borderRadius: 8,
        overflow: 'hidden',
    },
    imageContainer: {
        flex: 1,
        width: '100%',
        justifyContent: 'center',
        alignItems: 'center',
        padding: 10,
    },
    image: {
        width: '100%',
        height: '100%',
        borderRadius: 4,
    },
    imageTitle: {
        marginTop: 8,
        fontSize: 14,
        fontWeight: 'bold',
        color: '#333',
        textAlign: 'center',
    },
    arrow: {
        position: 'absolute',
        top: '50%',
        width: 30,
        height: 30,
        borderRadius: 15,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        justifyContent: 'center',
        alignItems: 'center',
        zIndex: 1,
    },
    arrowLeft: {
        left: 5,
    },
    arrowRight: {
        right: 5,
    },
    arrowText: {
        color: 'white',
        fontSize: 20,
        fontWeight: 'bold',
    },
    indicatorContainer: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        paddingVertical: 8,
    },
    indicator: {
        width: 8,
        height: 8,
        borderRadius: 4,
        backgroundColor: '#ccc',
        marginHorizontal: 4,
    },
    activeIndicator: {
        backgroundColor: '#0a7ea4',
    },
    noImagesText: {
        textAlign: 'center',
        color: '#666',
        fontStyle: 'italic',
    },
});

export default ECGImageCarousel;